<template>
	<view class="content">
		<u--form labelPosition="top" labelWidth="80" :model="form" ref="uForm" :rules="rules">
			
			<u-form-item label="手机号" ref="phone" borderBottom prop="phone" required>
				<u--input v-model="form.phone" border="none"></u--input>
			</u-form-item>


			<u-form-item label="验证码" ref="code" borderBottom prop="code" required>

				<view class="code-view">
					<view class="">
						<u--input v-model="form.code" border="none"></u--input>
					</view>
					<view class="">
						<u-button type="primary" @click="handleSendCode" :disabled="btnDisabled" >{{btnContent}}</u-button>
					</view>
				</view>
			</u-form-item>
		</u--form>
		<view class="sub-btn">
			<u-button type="primary" @click="handleBind" :loading="loading" loadingText="提交中....">绑定</u-button>
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		smsSendCode,bindPhone
	} from '@/api/auth/user'
	export default {
		data() {
			return {
				//倒计时秒数
				seconds:30,
				//按钮是否禁用  默认不禁用
				btnDisabled:false,
				//发送验证码按钮的文本内容
				btnContent:'发送验证码',
				form: {
					phone: '',
					code: ''
				},
				loading: false,
				//校验规则
				rules:{
					phone:[{
						required:true,
						message:'请输入手机号',
						trigger: ['blur', 'change']
					}],
					code:[{
						required:true,
						message:'请输入验证码',
						trigger: ['blur', 'change']
					}],
					

					
				}
			};
		},
		methods: {
			/**
			 * 发送短信验证码
			 */
			handleSendCode() {
				//对表单的手机号字段做校验
				this.$refs.uForm.validateField('phone',(errorRes)=>{
					console.log('errorRes',errorRes)
					if(!errorRes.length){
						//禁用按钮  启动倒计时
						this.btnDisabled=true
						let interval =setInterval(()=>{//定时器：周期性的执行内容
							//更改按钮内容，同时秒数自减
							this.btnContent='重新发送('+this.seconds+')'
							this.seconds--
							if(this.seconds<0){
								//清空计时器
								clearInterval(interval)
								//启用按钮
								this.btnDisabled=false
								//按钮文本
								this.btnContent='发送验证码'
								//执行结束 描述变回去
								this.seconds=30
							}
						},1000)
						
						//校验通过
						smsSendCode(this.form.phone).then(res => {
							console.log(res)
							if (res.code == 200) {
								//成功
								this.$refs.uToast.show({
									type:"success",
									message:"发送成功"
								});
								
							} else {
								//失败
								this.$refs.uToast.show({
									type:"error",
									message:res.msg
									
								})
							}
						
						})						
					}
					
					
				})
			
			},
			handleBind() {
				this.$refs.uForm.validate().then(res=>{
					console.log('绑定校验',res)
					if(res){
						//校验通过
						bindPhone(this.form.phone,this.form.code).then(res=>{
							console.log(res)
							if(res.code==200){
								//更新用户信息
								uni.setStorageSync("userInfo",res.userInfo)
								
								//成功，跳转到面试页面
								uni.navigateTo({
									url:'/pages/interview/interview'
								})
							}else{
								//失败，提示失败
								this.$refs.uToast.show({
									type:"error",
									message:res.msg		
								})
							}
						})	
					}
					
				})
				
				
			}

		}
	}
</script>

<style lang="scss">
	.code-view {
		display: flex;
		justify-content: space-between;
		align-items: center;

		ul-button {}
	}

	.content {
		padding: 30rpx;
	}

	.sub-btn {
		margin-top: 50px;
	}
</style>